<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>menu</title>
        <style type="text/css">
        body {
            font-size: 11px;
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
        }

        ul,
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        ul {
            margin-left: 1em;
        }

        input {
            position: absolute;
            padding: 0;
            margin: 0;
            opacity: 0;
        }

        input:not(:checked) + a ~ div li {
            line-height: 16px;
            opacity: 1;
            -webkit-transition: all .25s ease;
            -moz-transition: all .25s ease;
            transition: all .25s ease;
        }

        input:checked + a ~ div li {
            /* display: none; */
            line-height: 0px;
            opacity: 0;
            -webkit-transition: all .25s ease;
            -moz-transition: all .25s ease;
            transition: all .25s ease;
        }

        a {
            vertical-align: middle;
            color: #00f;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        a::before {
            color: black;
            content: "　";
        }

        input + a::before {
            color: black;
            content: "▼";
        }

        input:checked + a::before {
            color: black;
            content: "►";
        }

        a:active {
            background-color: red;
        }

        </style>
    </head>
    <body>
        <ul>
            {$CURSOR}
        </ul>
    </body>
</html>
